<template>
    <div style="text-align: center;height: 100vh;">
        <div>
            <br/><br/><br/>
            <h1 style="font-weight: 800;margin-bottom: 10px;">注册</h1>
            <div>
                <el-form
                ref="ruleFormRef"
                style="width: 500px;margin: 0 auto;text-align: center;"
                :model="ruleForm"
                :rules="rules"
                label-width="auto"
                class="demo-ruleForm"
                :size="formSize"
                status-icon
            >
                <el-form-item label="账号：" prop="login_name">
                    <el-input v-model="ruleForm.login_name" />
                </el-form-item>

                <el-form-item label="密码：" prop="password">
                <el-input v-model="ruleForm.password" type="password" show-password/>
                </el-form-item>

                 <el-form-item label="姓名：" prop="name">
                    <el-input v-model="ruleForm.name" />
                </el-form-item>

                <el-form-item label="邮箱：" prop="email">
                    <el-input v-model="ruleForm.email" />
                </el-form-item>

                 <el-form-item label="手机：" prop="phone">
                    <el-input v-model="ruleForm.phone" />
                </el-form-item>

                <el-form-item label="用户类型：" prop="user_type">
                    <!-- <el-radio-group v-model="ruleForm.user_type">
                        <el-radio :value="1">员工</el-radio>
                        <el-radio :value="2">组长</el-radio>
                        <el-radio :value="3">经理</el-radio>
                        <el-radio :value="4">超级管理员</el-radio>
                        <el-radio :value="5">董事长</el-radio>
                    </el-radio-group> -->
                    <el-radio-group v-model="ruleForm.user_type">
                        <el-radio v-for="i in roles" :key="i.id"  :value="i.id">{{ i.name }}</el-radio>
                        <!-- <el-radio :value="2">组长</el-radio>
                        <el-radio :value="3">经理</el-radio>
                        <el-radio :value="4">超级管理员</el-radio>
                        <el-radio :value="5">董事长</el-radio> -->
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="性别：" prop="sex">
                    <el-radio-group v-model="ruleForm.sex">
                        <el-radio :value="1">男</el-radio>
                        <el-radio :value="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>

                <!-- <el-form-item label="头像：" prop="avatar">
                    <el-upload
                        class="avatar-uploader"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>
                </el-form-item> -->

                <el-form-item label="管理类型：" prop="mgr_type">
                    <el-radio-group v-model="ruleForm.mgr_type">
                        <el-radio :value="1">普通</el-radio>
                        <el-radio :value="2">超级管理员</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="状态：" prop="login_flag">
                    <el-radio-group v-model="ruleForm.login_flag">
                        <el-radio :value="1">启用</el-radio>
                        <el-radio :value="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label=" ">
                    <el-button type="primary" @click="ZhuUser(ruleFormRef)">
                        注册
                    </el-button>
                    <el-button @click="DengUser">登录</el-button>
                </el-form-item>

            </el-form>
            </div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import axios from 'axios';
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute,useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()

import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const locationOptions = ['Home', 'Company', 'School']
import http from '../http.js'
//表单字段
const ruleForm = reactive({
    login_name: '',//账号
    password: '',//密码
    name: '',//姓名
    email: '',//邮箱
    phone: '',//手机
    user_type: 19,//用户类型 int
    sex: 0,//性别 int 1男0女
    mgr_type: 2,//管理类型 int
    avatar: '/',//头像
    login_flag:1//是否启用 1启用2禁用
})
//验证
const rules = reactive<FormRules>({
    login_name: [
    { required: true, message: '账号不能为空', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
    ],
    name: [
        { required: true, message: '姓名不能为空', trigger: 'blur' },
    ],
    email: [
        { required: true, message: '邮箱不能为空', trigger: 'blur' },
    ],
    phone: [
        { required: true, message: '手机不能为空', trigger: 'blur' },
    ],
})
//注册
const ZhuUser = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
      if (valid) {
        axios.post(http.RBACxie+'/api/User/userCreate',ruleForm)
        .then(res => {
            if (res.data.code == 200) {
                ElMessage({ message: res.data.message, type: 'success', })
                router.push('/')
            }
            else if (res.data.code == 201){
                ElMessage({
                    message: res.data.message,
                    type: 'warning',
                })
                return
            }
            else{
                ElMessage({
                    message: '注册失败',
                    type: 'warning',
                })
                return
            }
        })
        .catch(err => {
          console.log(err)
        })
    } else {
      console.log('error submit!', fields)
    }
  })
}
onMounted(() => {
    GetRoles();//显示角色
})
//动态显示角色
const roles=ref([])
const GetRoles = () => {
    axios.get(http.RBACdu+'/api/Role/RoleSelectShow')
    .then(res => {
        // console.log(res)
        roles.value=res.data.  data  
    })
    .catch(err => {
        console.log(err)    
    })
}
//登录
const DengUser = () => {
  router.push('/')
}

</script>
    
<style>
    
</style>